﻿<!-- 2017-12-7 14:56:03 | 修改 木遥（微信:  http://marsgis.cn/weixin.html ） -->
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0" />
    <meta name="apple-touch-fullscreen" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="x5-fullscreen" content="true">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
    <!-- 标题及搜索关键字 -->
    <meta name="keywords" content="火星科技,cesium,3D,GIS,marsgis,三维,地球,地图,开发,框架,系统,示例,资料,模型,离线,外包,合肥,安徽,中国" />
    <meta name="description"
        content="火星科技 合肥火星 合肥火星科技 合肥火星科技有限公司 leaflet leaflet框架 leaflet开发 cesium cesium开发 cesium框架 三维 地球 模型  gis marsgis 地图离线 地图开发 地图框架 地图外包 框架 开发 外包  地图离线 二维地图 三维地图 全景漫游 地理信息系统 云GIS 三维GIS GIS平台 WebGIS" />

    <link rel="shortcut icon" type="image/x-icon" href="http://cesium.marsgis.cn/favicon.ico">
    <title>路线漫游及控制 卫星示例 |Mars3D ( MarsGIS for Cesium )|三维地图| 火星科技|合肥火星科技|合肥火星科技有限公司</title>




    <script type="text/javascript" src="../lib/include-lib.js" libpath="../lib/"
        include="jquery,font-awesome,bootstrap,bootstrap-checkbox,jquery.range,layer,haoutil,turf,mars3d"></script>


    <link href="css/style.css" rel="stylesheet" />
    <style>
        .mp_table {
            width: 100%;
            border: #cde1de 1px solid;
            font-size: 12px;
            border-collapse: collapse;
            border-spacing: 0;
        }

        .mp_table tr td {
            padding: 5px 5px;
            text-align: left;
            border: #cde1de 1px solid;
        }

        .mp_table tr td:first-child {
            border-left: none;
        }

        .nametd {
            width: 40%;
        }

        .mp_input {
            height: 28px;
            line-height: 22px;
            padding: 3px 5px;
            box-sizing: border-box;
            font-size: 12px;
            border: 1px solid #e6e6e6;
            background-color: #fff;
            border-radius: 3px;
            display: block;
            width: 100%;
            outline: 0;
            box-sizing: border-box;
        }

        .mp_input:hover {
            border-color: #c9c9c9 !important;
        }

        .mp_input:focus {
            border-color: #3374e0 !important;
        }

        /*select*/
        .mp_select {
            height: 28px;
            line-height: 22px;
            padding: 0 5px;
            box-sizing: border-box;
            font-size: 12px;
            border: 1px solid #e6e6e6;
            background-color: #fff;
            border-radius: 3px;
            outline: 0;
            box-sizing: border-box;
            position: relative;
        }

        .mp_select:after {
            content: '';
            width: 0;
            height: 0;
            overflow: hidden;
            cursor: pointer;
            transition: all .2s;
            position: absolute;
            border-width: 6px;
            display: inline-block;
            top: 10px;
            right: 5px;
            border-style: solid dashed dashed;
            border-color: #c2c2c2 transparent transparent;
        }

        .mp_selected:after {
            top: 4px;
            border-style: dashed dashed solid;
            border-color: transparent transparent #c2c2c2;
        }

        .mp_select .mp_select_text {
            padding: 0 20px 0 0;
            height: 28px;
            line-height: 26px;
            overflow: hidden;
        }

        .mp_select_ul {
            background: #fff;
            border: #d6d6d6 1px solid;
            border-radius: 3px;
            padding: 5px 0;
            box-shadow: 1px 2px 1px rgba(0, 0, 0, .15);
            position: absolute;
            left: 0;
            z-index: 1000;
            color: #333;
            text-align: center;
            width: 100%;
            display: none;
        }

        .mp_select_ul li {
            margin: 0 5px;
            border-radius: 3px;
            text-align: left;
            height: 28px;
            line-height: 28px;
            text-indent: 5px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .mp_select_ul li:hover {
            background: #ecf1f8;
        }

        .mp_select_ul .selecton,
        .mp_select_ul .selecton:hover {
            background: #3374e0 !important;
            color: #fff !important;
        }

        /*dark*/
        .dark .mp_select {
            background-color: rgba(63, 72, 84, 0.6);
        }

        .dark .mp_select_ul {
            color: #ffffff;
            background-color: rgba(63, 72, 84, 0.8);
        }

        .dark .mp_select_ul li:hover {
            background-color: rgba(63, 72, 84, 1);
        }

        .dark .mp_select_ul .selecton,
        .mp_select_ul .selecton:hover {
            background: rgba(63, 72, 84, 1) !important;
            color: #fff !important;
        }

        .mp_head2 {
            width: 100%;
            height: 45px;
            line-height: 45px;
            text-align: center;
        }

        .dark .progress {
            margin: 0;
            background-color: #0b2931;
        }
    </style>

</head>

<body class="dark">
    <!--加载前进行操作提示，优化用户体验-->
    <div id="mask" class="signmask" onclick="removeMask()"></div>

    <div id="cesiumContainer" class="mars3d-container"></div>

    <!-- 控制 面板 -->
    <div class="infoview">
        <table class="mp_table">
            <tr>
                <td class="nametd">漫游视角</td>
                <td>
                    <select id="cameraType" class="mp_select" data-value="2">
                        <option value="">自由视角</option>
                        <option value="gs">跟随视角</option>
                        <option value="dy">锁定第一视角</option>
                        <option value="sd">锁定上帝视角</option>
                    </select>
                </td>
            </tr>
            <tr id="tr_followedX" title="距离漫游对象的水平距离，单位：米">
                <td class="nametd">视角距离</td>
                <td>
                    <input id="followedX" type="number" min="0" max="99999" value="1" class="mp_input" />
                </td>
            </tr>
            <tr id="tr_followedZ" title="距离漫游对象的高度，单位：米">
                <td class="nametd">视角高度</td>
                <td>
                    <input id="followedZ" type="number" min="0" max="99999" value="0" class="mp_input" />
                </td>
            </tr>
            <tr>
                <td class="nametd">模型角度</td>
                <td>
                    <div class="radio radio-info radio-inline">
                        <input type="radio" id="jiaodu_1" value="1" name="jiaodu" checked>
                        <label for="jiaodu_1">自动</label>
                    </div>
                    <div class="radio radio-info radio-inline">
                        <input type="radio" id="jiaodu_2" value="2" name="jiaodu">
                        <label for="jiaodu_2">手动</label>
                    </div>
                </td>
            </tr>
            <tr class="jiaodu_2_angele">
                <td class="nametd">heading值</td>
                <td>
                    根据路线自动计算
                    <!--<input id="model_heading" type="range" min="0" max="360" step="1.0" value="10" title="方向">-->
                </td>
            </tr>
            <tr class="jiaodu_2_angele">
                <td class="nametd">pitch值</td>
                <td>
                    <input id="model_pitch" type="range" min="0" max="360" step="1.0" value="0" title="倾角pitch">
                </td>
            </tr>
            <tr class="jiaodu_2_angele">
                <td class="nametd">roll值</td>
                <td>
                    <input id="model_roll" type="range" min="0" max="360" step="1.0" value="0" title="滚动角roll">
                </td>
            </tr>

        </table>

    </div>

    <!-- 信息 面板 -->
    <div class="infoview rightbottom" style="min-width: 200px;">
        <table class="mp_table">
            <tr>
                <td class="nametd">总长度</td>
                <td id="td_alllength"> </td>
            </tr>
            <tr>
                <td class="nametd">已漫游长度</td>
                <td id="td_length"> </td>
            </tr>
            <tr>
                <td class="nametd">总时长</td>
                <td id="td_alltimes"> </td>
            </tr>
            <tr>
                <td class="nametd">已漫游时间</td>
                <td id="td_times"> </td>
            </tr>

            <tr>
                <td class="nametd">经度</td>
                <td id="td_jd"> </td>
            </tr>
            <tr>
                <td class="nametd">经度</td>
                <td id="td_wd"> </td>
            </tr>
            <tr>
                <td class="nametd">漫游高程</td>
                <td id="td_gd"> </td>
            </tr>
            <tr>
                <td class="nametd">地面高程</td>
                <td id="td_dmhb"> </td>
            </tr>
            <tr id="tr_ldgd">
                <td class="nametd">离地距离</td>
                <td id="td_ldgd"> </td>
            </tr>

            <tr>
                <td colspan="2" style="width: 100%;text-align:center;">
                    <div class="progress">
                        <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="0"
                            aria-valuemin="0" aria-valuemax="100">
                            0%
                        </div>
                    </div>
                </td>
            </tr>
        </table>
    </div>

    <script type="text/javascript">
        $(document).ready(function () {
            if (!mars3d.util.webglreport()) {
                alert('系统检测到您使用的浏览器不支持WebGL功能');
                layer.open({
                    type: 1,
                    title: "当前浏览器不支持WebGL功能",
                    closeBtn: 0,
                    shadeClose: false,
                    resize: false,
                    area: ['600px', '200px'], //宽高
                    content: '<div style="margin: 20px;"><h3>系统检测到您使用的浏览器不支持WebGL功能！</h3>  <p>1、请您检查浏览器版本，安装使用最新版chrome、火狐或IE11以上浏览器！</p> <p>2、WebGL支持取决于GPU支持，请保证客户端电脑已安装显卡驱动程序！</p></div>'
                });
            }

            initMap();
        });

        function removeMask() {
            $("#mask").remove();
        }


        var viewer;
        //初始化地图
        function initMap() {
            //url传参，一个系统动态使用不同配置
            var configfile = haoutil.system.getRequestByName("config", "config/config.json");

            mars3d.createMap({
                id: 'cesiumContainer',
                url: configfile,
                animation: true,       //是否创建动画小器件，左下角仪表
                timeline: true,        //是否显示时间线控件
                center: { "y": 31.842038, "x": 117.253723, "z": 607.29, "heading": 272.9, "pitch": -29.1, "roll": 360 },
                success: function (_viewer, jsondata) {//地图成功加载完成后执行
                    viewer = _viewer;

                    setTimeout(removeMask, 3000);
                    initWork();
                }
            });
        }

        var flyLine;

        //当前页面业务相关
        function initWork() {
            //该数据可以从 基础项目 飞行漫游功能界面操作后保存JSON
            var flydata = {
                "id": "0617003846",
                "name": "城市飞行",
                "remark": "测试",
                // "clockLoop": true,      //是否循环播放
                "clockRange": Cesium.ClockRange.CLAMPED,   //CLAMPED 到达终止时间后停止
                "points": [
                    [117.245989, 31.852285, 100],
                    [117.246347, 31.834418, 300],
                    [117.246703, 31.816635, 500]
                ],
                "speed": 100,
                "camera": { "type": "gs", "followedX": 50, "followedZ": 10, "heading": 30, "distance": 500 },
                // "billboard": {"show": true, "image": 'img/marker/mark4.png' },
                // "model": {
                //     "show": true,
                //     "uri": serverURL_gltf + "/mars/zhanji.glb",
                //     "scale": 0.01,
                //     "minimumPixelSize": 100
                // },
                "model": { "show": true, "uri": serverURL_gltf + "/mars/MQ-9-Predator.glb", "scale": 1, "minimumPixelSize": 100 },
                "path": { "show": true, "color": "#ffff00", "opacity": 0.5, "width": 1, "isAll": false },
                "shadow": [{ "show": true, "type": "wall" }]
            };

            flyLine = new mars3d.FlyLine(viewer, flydata);
            flyLine.start();

            initUI();


            if (this.viewer.timeline)
                this.viewer.timeline.zoomTo(flyLine.startTime, flyLine.stopTime);


            //显示基本信息，名称、总长、总时间
            showAllInfo({
                name: flyLine.name,
                alllen: flyLine.alllen,
                alltime: flyLine.alltimes
            });


            setInterval(function () {
                showRealTimeInfo(flyLine.timeinfo);

            }, 200);
        }

        function initUI() {
            $('#cameraType').attr('data-value', flyLine.options.camera.type);
            $("#followedX").val(flyLine.options.camera.followedX);
            $("#followedZ").val(flyLine.options.camera.followedZ);

            //改变视角模式
            $('#cameraType').select();   //绑定样式
            $('#cameraType').change(function () {
                $("#tr_followedX").hide();
                $("#tr_followedZ").hide();

                var attrVal = $(this).attr('data-value');
                switch (attrVal) {
                    case "dy"://锁定第一视角
                        $("#tr_followedX").show();
                        $("#tr_followedZ").show();

                        $("#followedX").val(200);
                        $("#followedZ").val(50);

                        break;
                    case "sd"://锁定上帝视角
                        $("#tr_followedZ").show();

                        var followedZ = Number($("#followedZ").val());
                        if (followedZ < 500)
                            $("#followedZ").val(500);
                        break;
                }
                updateCameraSetting();
            });
            $('#cameraType').change();

            //第一视角
            $("#followedX").change(function () {
                updateCameraSetting();
            });
            $("#followedZ").change(function () {
                updateCameraSetting();
            });

            //模型方向
            $(".jiaodu_2_angele").hide();
            $('input:radio[name="jiaodu"]').change(function () {
                var isAuto = $(this).val() == "1";
                if (isAuto)
                    $(".jiaodu_2_angele").hide();
                else
                    $(".jiaodu_2_angele").show();

                updateModel(isAuto);
            });
            //滑动条 
            $("#model_pitch").range({
                onChange: function (value, bfb) {
                    updateModel();
                }
            });
            $("#model_roll").range({
                onChange: function (value, bfb) {
                    updateModel();
                }
            });

        }

        function updateModel(isAuto) {
            var pitch = Number($("#model_pitch").val());
            var roll = Number($("#model_roll").val());

            flyLine.updateAngle(isAuto, { pitch: pitch, roll: roll });
        }

        //改变视角模式
        function updateCameraSetting() {
            var cameraType = $("#cameraType").attr('data-value');
            var followedX = Number($("#followedX").val());
            var followedZ = Number($("#followedZ").val());

            flyLine.updateConfig({
                camera: {
                    type: cameraType,
                    followedX: followedX,
                    followedZ: followedZ
                }
            });
        }

        //显示基本信息，名称、总长、总时间
        var _alltime = 100;
        function showAllInfo(params) {
            _alltime = params.alltime;

            $("#td_alltimes").html(haoutil.str.formatTime(params.alltime));
            $("#td_alllength").html(haoutil.str.formatLength(params.alllen));
        }

        //显示实时坐标和时间
        function showRealTimeInfo(params) {
            if (params == null) return;

            var val = Math.ceil(params.time * 100 / _alltime);
            if (val < 1) val = 1;
            if (val > 100) val = 100;

            $(".progress-bar").css("width", val + '%').attr('aria-valuenow', val).html(val + '%');

            $("#td_jd").html(params.x);
            $("#td_wd").html(params.y);
            $("#td_gd").html(haoutil.str.formatLength(params.z));

            $("#td_times").html(haoutil.str.formatTime(params.time));
            $("#td_length").html(haoutil.str.formatLength(params.len));

            if (params.hbgd)
                $("#td_dmhb").html(haoutil.str.formatLength(params.hbgd));
            else
                $("#td_dmhb").html('未知');

            if (params.ldgd)
                $("#td_ldgd").html(haoutil.str.formatLength(params.ldgd));
            else
                $("#td_ldgd").html('未知');
        }








        //下拉框
        (function ($) {
            //下拉菜单默认参数
            var defaluts = {
                select: "mp_select",
                select_text: "mp_select_text",
                select_ul: "mp_select_ul"
            };

            $.fn.extend({
                // 下拉菜单
                // 下拉菜单
                "select": function (options) {
                    var opts = $.extend({}, defaluts, options);
                    return this.each(function () {
                        var that = $(this);
                        //模拟下拉列表
                        if (that.data("value") !== undefined && that.data("value") !== '') {
                            that.val(that.data("value"));
                        }
                        var _html = [];
                        _html.push("<div class=\"" + that.attr('class') + "\">");
                        _html.push("<div class=\"" + opts.select_text + "\">" + that.find(":selected").text() + "</div>");
                        _html.push("<ul class=\"" + opts.select_ul + "\">");
                        that.children("option").each(function () {
                            var option = $(this);
                            if (that.data("value") == option.val()) {
                                _html.push("<li data-value=\"" + option.val() + "\">" + option.text() + "</li>");
                            } else {
                                _html.push("<li data-value=\"" + option.val() + "\">" + option.text() + "</li>");
                            }
                        });
                        _html.push("</ul>");
                        _html.push("</div>");
                        var select = $(_html.join(""));
                        var select_text = select.find("." + opts.select_text);
                        var select_ul = select.find("." + opts.select_ul);
                        that.after(select);
                        that.hide();

                        that.change(function () {
                            var val = that.attr("data-value");
                            that.children("option").each(function () {
                                var option = $(this);
                                if (val == option.val()) {
                                    select_text.text(option.text());
                                }
                            });
                        });

                        //下拉列表操作
                        select.click(function (event) {
                            $(this).toggleClass('mp_selected');
                            $(this).find("." + opts.select_ul).slideToggle().end().siblings("div." + opts.select).find("." + opts.select_ul).slideUp();
                            event.stopPropagation();
                        });
                        $("body").click(function () {
                            select_ul.slideUp();
                        });
                        select_ul.on("click", "li", function () {
                            var li = $(this);
                            var val = li.addClass("selecton").siblings("li").removeClass("selecton").end().data("value").toString();
                            if (val !== that.attr("data-value")) {
                                select_text.text(li.text());
                                that.attr("data-value", val);
                                that.change();
                            }
                        });
                    });
                },

            });
        })(jQuery);


    </script>
</body>

</html>